<!DOCTYPE html>
<html lang="en"  style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Top10最热职位和薪资关系图</title>
    <script src="/static/jquery-1.12.0.min.js"></script>
    <script src="/static/echarts.min.js"></script>
</head>
<body style="height: 100%">
<div id="main" style="height: 100%"></div>
<script>
    $(function () {
        $.ajax({
            url:'/zwyx/zwmc',
            type:'get',
            dataType:'json',
            success:function (returnData) {
                if(returnData.status==1)
                {
                    myoption = {
                        title: {
                            text: 'Top10最热职位',
                            subtext: '职位画像系统',
                            sublink: 'http://www.ibeifeng.com',
                            textStyle: {
                                color: '#000'
                            }
                        },
                        backgroundColor: '#fff',
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['职位总数', '平均薪资','最大薪资','最小薪资'],
                            textStyle: {
                                color: '#000033'
                            }
                        },
                        xAxis: {
                            data: returnData.zwmc_list,
                            axisLine: {
                                lineStyle: {
                                    color: '#000033'
                                }
                            }
                        },
                        yAxis: {
                            splitLine: {show: false},
                            axisLine: {
                                lineStyle: {
                                    color: '#000033'
                                }
                            }
                        },
                        series: [{
                            name: '职位总数',
                            type: 'line',
                            smooth: true,
                            showAllSymbol: true,
                            symbol: 'emptyCircle',
                            symbolSize: 15,
                            data: returnData.count_zw,
							itemStyle: {
                                normal: {
                                    color: '#009999'
                                }
                            }
                        }, {
                            name: '平均薪资',
                            type: 'bar',
                            barWidth: 10,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 5,
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#660099'},
                                            {offset: 1, color: '#669900'}
                                        ]
                                    )
                                }
                            },
                            data: returnData.avg_zw
                        }, {
                            name: '最大薪资',
                            type: 'line',
                            smooth: true,
                            showAllSymbol: true,
                            symbol: 'diamond',
                            symbolSize: 15,
                            itemStyle: {
                                normal: {
                                    color: '#006600'
                                }
                            },
                            data: returnData.max_xz
                        },{
                            name: '最小薪资',
                            type: 'pictorialBar',
                            symbol: 'rect',
                            itemStyle: {
                                normal: {
                                    color: '#000066'
                                }
                            },
                            symbolRepeat: true,
                            symbolSize: [12, 4],
                            symbolMargin: 1,
                            z: -10,
                            data: returnData.min_xz
                        }]
                    };
                    var myChart = echarts.init(document.getElementById('main'));
                    myChart.setOption(myoption);
                }
                 else
                {
                    alert('暂无数据');
                }
            }
        })

    })
</script>
</body>
</html>